<template>
  <Layout nav-title="首页">
    <view class="index-page">
      <!-- 顶部用户信息 -->
      <view class="user-info" @click="onUserInfo">
        <image class="avatar" src="/static/logo.png" />
        <view class="user-text">
          <text class="hello"> {{ isLogin ? '你好！' : '请登录' }}</text>
          <text class="username"> {{ isLogin ? memberStore.username : '前往登录' }}</text>
        </view>
      </view>

      <!-- 两个大按钮 -->
      <view class="main-actions">
        <view class="action-btn green" @click="onConsult">
          <view class="action-icon">
            <text class="iconfont">🩺</text>
          </view>
          <text class="action-title">在线问诊</text>
          <text class="action-desc">balabalbal</text>
        </view>
        <view class="action-btn blue" @click="onRegister">
          <view class="action-icon">
            <text class="iconfont">💡</text>
          </view>
          <text class="action-title">预约挂号</text>
          <text class="action-desc">balabalbal</text>
        </view>
      </view>

      <!-- 四个功能入口 -->
      <view class="feature-entries">
        <view class="entry" v-for="item in entries" :key="item.title" @click="onEntry(item)">
          <view class="entry-icon" :style="{ color: item.color }">
            <text class="iconfont">{{ item.icon }}</text>
          </view>
          <text class="entry-title" :style="{ color: item.color }">{{ item.title }}</text>
        </view>
      </view>

      <!-- 健康新闻区 -->
      <view class="card news-card">
        <view class="card-title-row">
          <view class="card-title-highlight">
            <text class="card-title-text">健康新闻</text>
            <view class="card-title-underline"></view>
          </view>
        </view>
        <view class="news-list">
          <view v-if="!isLogin" class="no-data">
            <img class="no-data-img" src="/static/images/state_no_list.png" />
            <text class="no-data-text">暂未登录</text>
          </view>
          <view v-else-if="newsList.length === 0" class="no-data">
            <img class="no-data-img" src="/static/images/state_no_list.png" />
            <text class="no-data-text">暂无数据</text>
          </view>
          <view
            v-else
            class="news-item"
            v-for="news in newsList"
            :key="news.id"
            @click="onNewsClick(news)"
          >
            <view class="news-main">
              <view class="news-texts">
                <text class="news-item-title">{{ news.title }}</text>
                <view class="news-meta">
                  <text class="news-hot">🔥 热度 {{ news.hot }}</text>
                  <text class="news-date">{{ dayjs(news.create_time).format('YYYY-MM-DD') }}</text>
                </view>
              </view>
              <view class="news-img-wrap">
                <image v-if="news.img" class="news-img" :src="news.img" mode="aspectFill" />
                <view v-else class="news-img news-img-placeholder"></view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 社区活动区 -->
      <view class="card activity-card">
        <view class="card-title-row">
          <view class="card-title-highlight">
            <text class="card-title-text">社区活动</text>
            <view class="card-title-underline"></view>
          </view>
        </view>
        <!-- 暂无数据状态 -->
        <view v-if="!activityList || activityList.length === 0" class="no-data">
          <img class="no-data-img" src="/static/images/state_no_list.png" />
          <text class="no-data-text">暂无数据</text>
        </view>
        <!-- 活动内容可在此补充 -->
      </view>
    </view>
  </Layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Layout from '@/components/Layout.vue'
import { getHomeNewsData } from '@/https/HomeHTTP'
import { onLoad } from '@dcloudio/uni-app'
import type { everyData } from '@/types/home'
import { useMemberStore } from '@/store'
import dayjs from 'dayjs'

const memberStore = useMemberStore()
const isLogin = memberStore.isLogin // 是否已登录
const isLoading = ref(false)
// 社区活动数据
const activityList = ref([])
// 功能入口
const entries = ref([
  { icon: '🩺', title: '医疗宝典', color: '#19C37C' },
  { icon: '📊', title: '药品查询', color: '#FF9800' },
  { icon: '🚚', title: '社区药房', color: '#00B4FF' },
  { icon: '⏰', title: '用药提醒', color: '#FF4D4F' },
])

// 新闻数据
const newsList = ref<everyData[]>([])
const getNewsData = async () => {
  const res = await getHomeNewsData()
  // console.log(res)
  newsList.value = res.data.data
  if (res.code == 401) {
    memberStore.setIsLogin(false)
  } else if (res.code == 200) {
    memberStore.setIsLogin(true)
  }
}

onLoad(async () => {
  try {
    if (memberStore.isLogin) {
      isLoading.value = true
      await Promise.all([getNewsData()])
      isLoading.value = false
    }
  } catch (error) {
    console.log(error)
  }
})

const onConsult = () => {
  // uni.showToast({ title: '在线问诊', icon: 'none' })
  uni.navigateTo({
    url: '/pages/component/zxwz/zxwz',
  })
}
const onRegister = () => {
  // uni.showToast({ title: '预约挂号', icon: 'none' })
  uni.navigateTo({
    url: '/pages/component/yygh/yygh',
  })
}
const onUserInfo = () => {
  if (isLogin) {
    uni.navigateTo({
      url: '/pages/profile/profile',
    })
  } else {
    uni.navigateTo({
      url: '/pages/login/login',
    })
  }
}
const onEntry = (item: any) => {
  // uni.showToast({ title: item.title, icon: 'none' })
  if (item.title === '医疗宝典') {
    uni.navigateTo({
      url: '/pages/component/ylbd/ylbd',
    })
  }
  if (item.title === '药品查询') {
    uni.navigateTo({
      url: '/pages/medical/medical',
    })
  }
  if (item.title === '社区药房') {
    uni.showToast({
      title: '敬请期待',
      icon: 'none',
    })
  }
  if (item.title === '用药提醒') {
    uni.navigateTo({
      url: '/pages/component/yytx/yytx',
    })
  }
}
const onNewsClick = (news: any) => {
  uni.navigateTo({
    url: `/pages/details/xwDetails/xwDetails?uid=${news.nid}`,
  })
}
</script>

<style scoped>
.index-page {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 0 0 40rpx 0;
}
.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 40rpx 0 40rpx;
  background: #ededed;
  border-radius: 0 0 40rpx 40rpx;
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  object-fit: cover;
  background: #fff;
}
.user-text {
  display: flex;
  flex-direction: column;
}
.hello {
  font-size: 28rpx;
  color: #333;
}
.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}
.main-actions {
  display: flex;
  gap: 30rpx;
  margin: 40rpx 40rpx 0 40rpx;
}
.action-btn {
  flex: 1;
  background: #fff;
  border-radius: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0 20rpx 0;
  transition: box-shadow 0.2s;
}
.action-btn.green {
  background: linear-gradient(135deg, #19c37c 0%, #43e97b 100%);
  color: #fff;
}
.action-btn.blue {
  background: linear-gradient(135deg, #00b4ff 0%, #29e6ff 100%);
  color: #fff;
}
.action-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}
.action-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.action-desc {
  font-size: 24rpx;
  opacity: 0.9;
}
.feature-entries {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 40rpx 0 40rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}
.entry {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.entry-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}
.entry-title {
  font-size: 26rpx;
  font-weight: 600;
}
.card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  margin: 32rpx 24rpx 0 24rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
}
.card-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}
/* 健康新闻标题高亮样式 */
.card-title-highlight {
  position: relative;
  display: inline-block;
  height: 38rpx;
}
.card-title-text {
  font-size: 30rpx;
  font-weight: bold;
  font-style: italic;
  color: #333;
  z-index: 2;
  position: relative;
}
.card-title-underline {
  position: absolute;
  left: 0;
  bottom: 2rpx;
  width: 90rpx;
  height: 16rpx;
  background: #3ec99e;
  z-index: 1;
  border-radius: 3rpx;
}
.card-title {
  font-size: 30rpx;
  font-weight: bold;
  font-style: italic;
  color: #222;
  margin-right: 12rpx;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.card-underline {
  width: 60rpx;
  height: 8rpx;
  background: #19c37c;
  border-radius: 4rpx;
}
.news-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.news-item {
  width: 100%;
}
.news-main {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.news-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.news-item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
  word-break: break-all;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 20rpx;
  font-size: 22rpx;
  color: #999;
}
.news-hot {
  color: #ff9800;
}
.news-date {
  color: #999;
}
.news-img-wrap {
  width: 110rpx;
  height: 90rpx;
  margin-left: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.news-img {
  width: 110rpx;
  height: 90rpx;
  border-radius: 12rpx;
  object-fit: cover;
  background: #f5f5f5;
}
.news-img-placeholder {
  background: #e0e0e0;
}
.activity-card {
  min-height: 180rpx;
  margin-top: 32rpx;
}
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}
.no-data-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
.no-data-text {
  font-size: 28rpx;
  color: #999;
}
</style>
